<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="shortcut icon"
      href="favicon.ico"
      type="image/x-icon"
      style="border-radius: 50%"
    />
    <style>
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }
      .box {
        width: 520px;
        margin: 20px auto;
        position: relative;
        user-select: none;
      }
      .box div {
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .box div.whiteKey {
        width: 60px;
        height: 360px;
        background-color: #fff;
        border: 2px solid #999;
        background-image: url(./imgs/key_back_white.png);
        float: left;
      }
      .box div.blackKey {
        width: 36px;
        height: 200px;
        color: #ccc;
        background-color: #666;
        border: 2px solid #666;
        background-image: url(./imgs/key_back_black.png);
        float: left;
        position: absolute;
        top: 0;
      }
      .music {
        width: 500px;
        margin: 0 auto;
        text-align: center;
      }
      .music span {
        color: red;
        font-size: 20px;
      }
      .music img {
        width: 500px;
      }
      #key61 {
        left: 44px;
      }
      #key63 {
        left: 108px;
      }
      #key66 {
        left: 236px;
      }
      #key68 {
        left: 300px;
      }
      #key70 {
        left: 428px;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div id="key60" class="key whiteKey">q<br />a<br />z</div>
      <div id="key62" class="key whiteKey"><br />s<br />x</div>
      <div id="key64" class="key whiteKey"><br />d<br />c</div>
      <div id="key65" class="key whiteKey">r<br />f<br />v</div>
      <div id="key67" class="key whiteKey"><br />g<br />b</div>
      <div id="key69" class="key whiteKey"><br />h<br />n</div>
      <div id="key71" class="key whiteKey"><br />j<br />m</div>
      <div id="key72" class="key whiteKey">i<br />k<br />,</div>
      <div id="key61" class="key blackKey">w</div>
      <div id="key63" class="key blackKey">e</div>
      <div id="key66" class="key blackKey">t</div>
      <div id="key68" class="key blackKey">y</div>
      <div id="key70" class="key blackKey">u</div>
    </div>
    <div class="music">
      <span>※送给小巴※</span>
      <img src="./imgs/timg.png" alt="小星星歌谱" />
    </div>
    <script src="./js/sounds.js"></script>
    <script>
      var key60 = document.querySelector("#key60");
      var key61 = document.querySelector("#key61");
      var key62 = document.querySelector("#key62");
      var key63 = document.querySelector("#key63");
      var key64 = document.querySelector("#key64");
      var key65 = document.querySelector("#key65");
      var key66 = document.querySelector("#key66");
      var key67 = document.querySelector("#key67");
      var key67 = document.querySelector("#key67");
      var key68 = document.querySelector("#key68");
      var key69 = document.querySelector("#key69");
      var key70 = document.querySelector("#key70");
      var key71 = document.querySelector("#key71");
      var key72 = document.querySelector("#key72");
      //replace 替换 第一个参数 表示要替换的字符串  第二个参数表示用哪个字符串进行替换
      key60.onclick = key61.onclick = key62.onclick = key63.onclick = key64.onclick = key65.onclick = key66.onclick = key67.onclick = key68.onclick = key69.onclick = key70.onclick = key71.onclick = key72.onclick = function () {
        var x = this.id.replace("key", "");
        playAudio(x);
      };
      function playAudio(index) {
        var audio = new Audio(oggSound[`sound${index}`]);
        audio.play();
        var ele = document.querySelector(`#key${index}`);
        ele.style.backgroundColor = "pink";

        setTimeout(() => {
          ele.style.backgroundColor = ele.classList.contains("blackKey")
            ? "#666"
            : "#fff";
        }, 100);
      }
      document.onkeypress = function (e) {
        // 通过e事件对象获取按下的是某个键
        // console.log(e.key);
        // console.log(e.keyCode);
        switch (e.key) {
          case "a":
          case "A":
          case "q":
          case "Q":
          case "z":
          case "Z":
            playAudio(60);
            break;
          case "w":
          case "W":
            playAudio(61);
            break;
          case "x":
          case "X":
          case "s":
          case "S":
            playAudio(62);
            break;
          case "e":
          case "E":
            playAudio(63);
            break;
          case "d":
          case "D":
          case "c":
          case "C":
            playAudio(64);
            break;
          case "r":
          case "R":
          case "f":
          case "F":
          case "v":
          case "V":
            playAudio(65);
            break;
          case "t":
          case "T":
            playAudio(66);
            break;
          case "g":
          case "G":
          case "b":
          case "B":
            playAudio(67);
            break;
          case "y":
          case "Y":
            playAudio(68);
            break;
          case "h":
          case "H":
          case "n":
          case "N":
            playAudio(69);
            break;
          case "u":
          case "U":
            playAudio(70);
            break;
          case "j":
          case "J":
          case "m":
          case "M":
            playAudio(71);
            break;
          case "i":
          case "I":
          case "k":
          case "K":
          case ",":
          case "，":
            playAudio(72);
            break;

          default:
            break;
        }
      };
    </script>
  </body>
</html>
